{% extends "base.html" %}

{% block script_head %}
    <script type="text/javascript" src="/js/poi_marker.js"></script>
    <script type="text/javascript">
        {% if local_user %}
        var initialLocation = new google.maps.LatLng({{local_user.location.lat}}, {{local_user.location.lon}});
        {% else %}
        var initialLocation = new google.maps.LatLng(29.986707, 31.438864);
        {% endif %}
        var browserSupportFlag =  new Boolean();
    
        function initialize() {
            var myOptions = {
                    zoom: 18,
                    center: initialLocation,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
            var map = new google.maps.Map($("#map_canvas")[0], myOptions);
            detectLocation(map);
            $.getJSON( '/getPOI', function(data){
                for(var i=0;i<data.hotspots.length;i++){
                    data.hotspots[i].lat /= 1000000.0;
                    data.hotspots[i].lon /= 1000000.0;
                    var poi = data.hotspots[i];
                    $('#marker_list').append(
                    '<tr id="marker_table_id_'+poi.id+'">\n'+
                        "<td>"+poi.id+"</td>\n"+
                        "<td>"+poi.attribution+"</td>\n"+
                        "<td>"+poi.private+"</td>\n"+
                        "<td>"+poi.title+"</td>\n"+
                        "<td>"+poi.lat+","+poi.lon+"</td>\n"+
                        "<td>"+poi.line2+"</td>\n"+
                        "<td>"+poi.line3+"</td>\n"+
                        "<td>"+poi.line4+"</td>\n"+
                    "</tr>");
                    var marker = new POIMarker({
                    position: new google.maps.LatLng(poi.lat,poi.lon),
                    map: map,
                    title:poi.title,
                    poi:poi,
                    saved:true
                });
                }
            });
        }

        function detectLocation(map) {
          
          // Try W3C Geolocation (Preferred)
          if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(handleGotGeolocation, function() {});
          // Try Google Gears Geolocation
          } else if (google.gears) {
            var geo = google.gears.factory.create('beta.geolocation');
            geo.getCurrentPosition(handleGotGeolocation, function() {});
          }
          
          function handleGotGeolocation(position) {
            if(position.hasOwnProperty('coords'))
                initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);            
            else
                initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
            map.setCenter(initialLocation);
            var marker = new POIMarker({
                position: map.getCenter(),
                map: map,
                title:"Current Location",
                isCurrentLoc: true
            });
          }
          
          {% if user %}
            google.maps.event.addListener(map, 'rightclick', function(event){
                var marker = new POIMarker({
                    position: event.latLng,
                    map: map,
                    title:"Untitled",
                    saved:false
                });
            });
          {% endif %}
        }
        
        $(document).ready(initialize);
    </script>
{% endblock %}

{% block content %}
    {%if user%}
    <h3> Right click to add markers </h3>
    {%endif%}
    <div id="map_canvas" style="width:50%; height:50%"></div>
    <div id="markers"  style="width:50%">
        <table id="marker_list">
            <tr>
                <td>id</td>
                <td>user</td>
                <td>private</td>
                <td>title</td>
                <td>position</td>
                <td>desc1</td>
                <td>desc2</td>
                <td>desc3</td>
            </tr>
            {% for poi in pois %}
            <tr>
               <td>{{poi.key.id}}</td>
               <td>{{poi.user.user}}</td>
               <td>{{poi.private}}</td>
               <td>{{poi.title}}</td>
               <td>{{poi.lat_lng.lat}},{{poi.lat_lng.lon}}</td>
               <td>{{poi.desc1}}</td>
               <td>{{poi.desc2}}</td>
               <td>{{poi.desc3}}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
    <h3> Comments </h3>
    <div id="current_marker_comments">
    </div>
    
{% endblock %}

